<template>
  <div class="subject-manage">
    <el-card>
      <div class="desc-box">
        <div class="title">基础学科列表</div>
        <div class="desc">您可以对基础学科信息进行添加或编辑操作！</div>
      </div>
      <div class="use-box">
        <div>
          <el-button class="add-button" type="primary" @click="openAddAndEditDialog(0)">添加基础学科</el-button>
        </div>
        <div class="search-box">
          <div class="search-input">
            <el-input clearable @clear="getSubjectList"
                      v-model="queryInfo.SubjectName" placeholder="请输入基础学科名称">
            </el-input>
          </div>
          <div>
            <el-button type="primary" class="search-button" @click="getSubjectList">查询</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!--    表格区域-->
    <el-card class="second-card">
      <el-table
        :data="subjectList"
        style="width: 100%"
        border
        v-loading="loading"
        element-loading-text="拼命加载中......"
        :header-cell-style="{textAlign:'center'}"
        :cell-style="{textAlign:'center'}"
        :header-cell-class-name="setHeaderRowClassName">
        <el-table-column type="index" fixed></el-table-column>
        <el-table-column prop="SubjectName" label="基础学科名称"></el-table-column>
        <el-table-column prop="Describe" label="基础学科描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="基础学科图片" width="120">
          <el-image
            slot-scope="scope"
            v-if="scope.row.Image"
            style="width: 80px; height: 80px"
            :src="imageUrl+scope.row.Image"
            :previewSrcList="imageUrlList"></el-image>
        </el-table-column>
        <el-table-column
          label="启停状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.Status"
              :active-value="1"
              :inactive-value="0"
              @change="statusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="基础学科排序" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="sortSubjectInfo(scope.row.ID,scope.row.Sort,'Up')">上移</el-button>
            <el-button size="mini" @click="sortSubjectInfo(scope.row.ID,scope.row.Sort,'Down')">下移</el-button>
            <el-button size="mini" @click="sortSubjectInfo(scope.row.ID,scope.row.Sort,'Top')">置顶</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openAddAndEditDialog(scope.row.ID)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteSubjectInfo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
     <pagination :child-msg="queryInfo" @callFather="callFather"></pagination>
    </el-card>

    <!--    新增和编辑对话框-->
    <add-and-edit-dialog
      v-if="isShowDialogComponent"
      @handleClose="handleClose"
      :is-show-dialog-component="isShowDialogComponent"
      :title="title"
      :judge-id="judgeId"
    ></add-and-edit-dialog>
  </div>
</template>

<script>
//导入对话框组件
import AddAndEditDialog from './childComps/AddAndEditDialog'
//导入接口类
import BaseSubjectManage from '../../model/baseSubjectManage'
import Pagination from '../../components/base/pagination/Pagination'
export default {
  name: 'SubjectManage',
  components: {
    AddAndEditDialog,
    Pagination
  },
  data () {
    return {
      loading: false,
      isShowDialogComponent: false,
      title: '',
      judgeId: 0,
      subjectList: [],
      //学科列表需要传入的参数
      queryInfo: {
        SubjectName: '',
        Page: 1,
        Limit: 10,
        total: 0
      },
      //后台返回的ImageUrl
      imageUrl: '',
      //大图预览
      imageUrlList: [],
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    setHeaderRowClassName ({ rowIndex }) {
      if (rowIndex === 0) {
        return 'setHeaderSubjectColumnName'
      }
    },
    callFather (value) {
      if (value.currentPage) this.queryInfo.Page = value.currentPage
      if (value.pageSize) this.queryInfo.Limit = value.pageSize
      this.getTableList()
    },
    handleClose (payload) {
      if(payload==='submitButton'){
        this.getSubjectList()
      }
      this.isShowDialogComponent = false
    },
    //打开添加对话款
    openAddAndEditDialog (id) {
      this.title = id === 0 ? '添加学科' : '编辑学科'
      this.judgeId = id === 0 ? 0 : id
      this.isShowDialogComponent = true
    },
    //获取学科列表
    async getSubjectList () {
      const res = await BaseSubjectManage.getSubjectList(this.queryInfo)
      this.subjectList = res.ListData
      this.queryInfo.total = res.Total
      this.imageUrl = res.ImageUrl
      this.initImageUrlList()
    },
    //大图预览功能
    initImageUrlList () {
      this.subjectList.forEach(item => {
        this.imageUrlList.push(this.imageUrl + item.Image)
      })
    },
    //删除操作
    async deleteSubjectInfo (rowInfo) {
      const confirmResult = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult === 'cancel') {
        this.$message.info('已取消删除学科操作')
      } else {
        await BaseSubjectManage.deleteSubjectInfo(rowInfo.ID)
        this.$message.success('成功删除该学科')
        await this.getSubjectList()
      }
    },
    //排序
    async sortSubjectInfo (ID, Sort, Type) {
      try {
        await BaseSubjectManage.sortSubjectInfo(ID, Sort, Type)
        this.$message.success('成功将学科信息位置重新排序')
        await this.getSubjectList()
      } catch (err) {
        console.log(err)
      }
    },
    //改变状态
    async statusChange (rowInfo) {
      await BaseSubjectManage.changeStatus(rowInfo.ID, rowInfo.Status)
      this.$message.success('成功修改学科信息的启停状态')
      await this.getSubjectList()
    }
  }
}
</script>


<style scoped>
@import "../../../src/assets/style/realize/tableStyle.css";
.subject-manage {
  background-color: #eee;
}
.second-card {
  position: relative;
  padding-bottom: 50px;
}
.el-pagination {
  position: absolute;
  right: 20px;
  bottom: 25px;
}
/*给表头一行加背景颜色*/
/deep/ .setHeaderSubjectColumnName {
  background-color: #E6E6FA !important;
  opacity: 0.7 !important;
}
</style>


